<template>
  <div class="line-chart">
    <div class="title">{{ props.data.title }}</div>
    <div class="left-line-box"></div>
    <div class="chat-box" ref="chartRef" id="main"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, watchEffect } from 'vue';

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        title: '节水数据',
        legendData: ['基准水量', '实际水量'],
        xAxisData: [],
        seriesData: [
          {
            name: '基准水量',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '实际水量',
            type: 'line',
            stack: 'Total',
            data: []
          }
        ]
      }
    }
  }
})

const chartRef = ref(null)
let myChart = null;
const initChart = () => {
const chartDom = chartRef.value;
if(!chartDom) {
  return;
}
if(!myChart) {
  myChart = echarts.init(chartDom);
}


const option = {
  toolbox: {
      show: false,
  },
  tooltip: {
    trigger: 'axis'
  },
  color: ['#2A82E4', '#F7BA1E','#FF7D00','#43CF7C'],
  legend: {
    data: [...props.data.legendData],
    type: 'plain',
    icon: 'rect',
    itemWidth: 13,
    itemHeight: 13,
    padding: [0,0,0,0],
    top: 18,
    itemGap: 31,
    textStyle: {
      color: "rgba(255, 255, 255, 1)",
      fontWeight: 700,
      fontSize: 16,
      lineHeight: 22,
    }
  },
  grid: {
    show: true,
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
    bottom: '5%',
    right: '0%',
    borderColor: '#9CDEFF16'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLine: {
      lineStyle:{
        color: '#0A77AD',
        width: 4,
      }
    },
    splitLine:{
      show: true,
      lineStyle:{
        color: '#9CDEFF16',
        width: 2,
      }
    },
    data: [...props.data.xAxisData]
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
      lineStyle:{
        color: '#0A77AD',
        width: 4,
      }
    },
    splitLine:{
      show: true,
      lineStyle:{
        color: '#9CDEFF16',
        width: 2,
      }
    },
  },
  series: [
    ...props.data.seriesData
  ]
};
option && myChart.setOption(option);

}


watchEffect(() => {
  initChart();
})
</script>


<style lang="scss">
.line-chart {
  height: 243px;
  border: 2px solid rgba(35, 135, 217, 1);
  border-top-left-radius: 11px;
  border-bottom-left-radius: 11px;
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  background: linear-gradient(90deg, rgba(33, 100, 156, 0.29) 0%, rgba(29, 70, 143, 0) 100%);
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  position: relative;
  box-sizing: border-box;
  .left-line-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 100%;
    border: 2px solid #2387D9;
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
    border-right: 0;
  }
  &::after {
    content:' ';
    background: linear-gradient(90deg, #2387D9 0%, #051a38 100%);
    position: absolute;
    width: calc(100% - 50px);
    height: 1.5px;
    left: 50px;
    top: 0px;
  }
  &::before {
    content:' ';
    background: linear-gradient(90deg, #2387D9 0%, #051a38 100%);
    position: absolute;
    width: calc(100% - 50px);
    height: 1.5px;
    left: 50px;
    bottom: 0px;
  }
  .title{
    width: 28px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 36.2px;
    color: rgba(42, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 65px;
    margin-left: 22px;
  }
  .chat-box{
    flex: 1;
    height: 100%;
  }
}
</style>